<template>
	<el-dialog title="导入源数据库表单信息" :visible.sync="dialogVisible">
		<el-form ref="importFormRef" :model="importForm" :rules="importFormRules" label-width="130px">
			<el-form-item label="病种kgCode:" prop="kgCode">
				<el-input v-model="importForm.kgCode"></el-input>
			</el-form-item>
			<el-form-item label="目标数据库URL:" prop="targetUrl">
				<el-input v-model="importForm.targetUrl"></el-input>
			</el-form-item>
			<el-form-item label="目标数据库账号:" prop="targetUsername">
				<el-input v-model="importForm.targetUsername"></el-input>
			</el-form-item>
			<el-form-item label="目标数据库密码: " prop="targetPassword">
				<el-input v-model="importForm.targetPassword"></el-input>
			</el-form-item>
			<el-form-item label="上传文件:" prop="excel">
				<!-- action这里比填,异步时写后端接口,就可以,我们不用,所以不谢-->
				<!--覆盖默认的上传行为，可以自定义上传的实现-->
				<!--这是上传前的处理方法-->
				<!--文件超出个数限制时的钩子-->
				<el-upload class="upload-demo" ref="upload" :http-request="httpRequest" :before-upload="beforeUpload" :on-exceed="handleExceed" :limit="1">
					<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					<div slot="tip" class="el-upload__tip">只能上传.xlsx文件，且不超过5M</div>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitImportForm">开始导入</el-button>
				<el-button type="info" @click="dialogVisible = false">关闭窗口</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'

//对话框控制权
const dialogVisible = ref(false)

//存放上传文件
const fileList = reactive([])
//导入表单数据
const importForm = reactive({
	kgCode: '',
	targetUrl: '',
	targetUsername: '',
	targetPassword: ''
})

const importFormRules = ref({
	targetUsername: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

// 覆盖默认的上传行为，可以自定义上传的实现，将上传的文件依次添加到fileList数组中,支持多个文件
const httpRequest = (option: any) => {
	fileList.push(option)
}

// 上传前处理
const beforeUpload = (file: File) => {
	let fileSize = file.size
	const FIVE_M = 5 * 1024 * 1024
	//大于5M，不允许上传
	if (fileSize > FIVE_M) {
		//   this.$message.error("最大上传5M")
		return false
	}
	//判断文件类型，必须是xlsx格式
	let fileName = file.name
	let reg = /^.+(\.xlsx)$/
	if (!reg.test(fileName)) {
		//this.$message.error("只能上传xlsx!")
		return false
	}
	return true
}

// 文件数量过多时提醒
const handleExceed = () => {
	// this.$message({ type: 'error', message: '最多支持1个附件上传' })
}
//导入Excel病种信息数据
const submitImportForm = () => {
	// 使用form表单的数据格式
	const params = new FormData()
	// 将上传文件数组依次添加到参数paramsData中
	fileList.forEach(x => {
		paramsData.append('file', x.file)
	})
	// 将输入表单数据添加到params表单中
	params.append('kgCode', importForm.kgCode)
	params.append('targetUrl', importForm.targetUrl)
	params.append('targetUsername', importForm.targetUsername)
	params.append('targetPassword', importForm.targetPassword)

	// //这里根据自己封装的axios来进行调用后端接口
	// this.httpPostWithLoading(IMPORT_URL, paramsData).then(match => {
	// 	if (match.success) {
	// 		this.$message({
	// 			message: '导入成功',
	// 			type: 'success'
	// 		})
	// 	} else {
	// 		this.$message({
	// 			message: '导入失败',
	// 			type: 'error'
	// 		})
	// 	}
	// 	this.$refs.importFormRef.resetFields() //清除表单信息
	// 	this.$refs.upload.clearFiles() //清空上传列表
	// 	this.fileList = [] //集合清空
	// 	this.dialogVisible1 = false //关闭对话框
	// })
}
</script>
<style scoped></style>
